{% extends "base.html" %}
{% load static %}
<!-- 写入 base.html 中定义的 title -->
{% block title %}
    文章详情
{% endblock title %}

<!-- 用于markdown文档中 代码高亮 -->
{% block extra_head %}

<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'prism/prism.css' %}">
{% endblock %}

{% block script %}
    <script>
        $(".django-ckeditor-widget").removeAttr('style');
    </script>
    <!-- dictory -->
    <script src="{% static 'sticky_sidebar/jquery.sticky-sidebar.min.js' %}"></script>
    <script type="text/javascript">
        $('#sidebar').stickySidebar({
            topSpacing: 20,
            bottomSpacing: 20,
        });
    </script>
    <script> <!-- 唤醒二级回复的 modal -->
    // 加载 modal
    function load_modal(article_id, comment_id) {
        let modal_body = '#modal_body_' + comment_id;
        let modal_id = '#comment_' + comment_id;

        // 加载编辑器
        if ($(modal_body).children().length === 0) {
         //   let src_url = '/comment/post-comment/' + article_id + '/' + comment_id + '/';
            let content = '<iframe src="/comment/post-comment/' +
            article_id +
            '/' +
            comment_id +
            '" frameborder="0" style="width: 100%; height: 90%;"></iframe>';
            $(modal_body).append(content);
        };

        $(modal_id).modal('show');
    }
</script>
{% endblock script %}

<!-- 写入 base.html 中定义的 content -->
{% block content %}

<!-- 文章详情 -->
<div class="container">
    <div class="row">
        <div class="col-9">
            <h1 class="col-12 mt-4 mb-4">{{ article.title }}</h1>
            <div class="col-12 alert alert-success">
                <div>
                    作者：{{ article.author }}
                    {% if user == article.author %}
                     · <a id="delete-button" onclick="confirm_safe_delete()" href="#">删除文章</a>
                     · <a href="{% url "blog:article-update" article.id %}">编辑文章</a>

                     {% endif %}
                </div>
                <div>标签: {% for tag in article.tag.all %}
                            <a href="#"class="badge badge-secondary">
                                {{ tag }}
                            </a>
                        {% endfor %}
                </div>
                <div> 浏览：{{ article.pv }} </div>
            </div>

            <!-- 标题及作者 -->

             <!-- 新增一个隐藏的表单 用于防止csrf攻击-->
            <form   style="display:none;" id="safe_delete"
                    action="{% url 'blog:article-delete' article.id %}"
                  method="POST">
                {% csrf_token %}
                <button type="submit">发送</button>
            </form>

            <!-- 文章正文 -->
            <div class="col-12">
                <p>{{ article.content|safe }}</p>
            </div>

             <!-- 评论 -->
            <hr>
            {% if user.is_authenticated %}
            <div>
                <form  action="{% url 'comment:post-comment' article_id=article.id %}"  method="POST">
                {% csrf_token %}
                    <div class="form-group">
                        <label for="content">
                            <strong>我也要发言：</strong>
                        </label>
                        <!--<textarea  type="text"  class="form-control"  id="content"  name="content" rows="2">
                        </textarea>!-->
                          <div>  <!-- 评论部分使用Ckeditor-->
                                {{ comment_form.media }}
                                {{ comment_form.content }}
                          </div>
                    </div>
                    <!-- 提交按钮 -->
                    <button type="submit" class="btn btn-primary ">发送</button>
                </form>
            </div>
            <br>
            {% else %}
                <br>
                <h5 class="row justify-content-center">
                    请<a href="{% url 'userprofile:login' %}">登录</a>后回复
                </h5>
                <br>
            {% endif %}


            <!-- 显示评论 -->
            {% load mptt_tags %}
            <h4>共有{{ comments.count }}条评论</h4>
            <div class="row">
                <!-- 遍历树形结构 -->
                {% recursetree comments %}
                    <!-- 给 node 取个别名 comment -->
                    {% with comment=node %}
                        <div class="{% if comment.reply_to %} offset-1 col-11 {% else %} col-12 {% endif %}">
                            <hr>


                            <p>
                                <strong style="color: pink">  {{ comment.user }} </strong>
                                {% if comment.reply_to %} --> {% endif %}
                                {% if comment.reply_to %}
                                    <i class="far fa-arrow-alt-circle-right"
                                       style="color: cornflowerblue;"></i>
                                    <strong style="color: pink">
                                        {{ comment.reply_to }}
                                    </strong>
                                {% endif %}

                            </p>
                            <div>{{ comment.content|safe }}</div>

                            <div>
                                <span style="color: gray">
                                    {{ comment.created|date:"Y-m-d H:i:s" }}
                                </span>

                                <!-- 加载 modal 的按钮 -->
                                {% if user.is_authenticated %}
                                    <button type="button"
                                            class="btn btn-light btn-sm text-muted"
                                            onclick="load_modal({{ article.id }}, {{ comment.id }})">
                                        回复
                                    </button>
                                {% else %}
                                    <a class="btn btn-light btn-sm text-muted"
                                       href="{% url 'userprofile:login' %}" >
                                        回复
                                    </a>
                                {% endif %}
                            </div>

                            <!-- Modal -->
                            <div class="modal fade"
                                 id="comment_{{ comment.id }}"
                                 tabindex="-1"
                                 role="dialog"
                                 aria-labelledby="CommentModalCenter"
                                 aria-hidden="true" >
                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                                    <div class="modal-content" style="height: 480px">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalCenterTitle">回复 {{ comment.user }}：</h5>
                                        </div>
                                        <div class="modal-body" id="modal_body_{{ comment.id }}"></div>
                                    </div>

                                </div>
                            </div>

                             {% if not comment.is_leaf_node %} <!-- 根结点 -->
                                <div class="children">
                                    {{ children }}
                                </div>
                            {% endif %}

                        </div>


                    {% endwith %}
                {% endrecursetree %}
            </div>


        </div>

        <!-- 目录 -->
{#        <div class="col-3 mt-4">#}
{#            <h4><strong>目录</strong></h4>#}
{#            <hr>#}
{#            <div>#}
{#                {{ toc|safe }}#}
{#            </div>#}
{#        </div>#}
        <div  id="sidebar" class="sidebar">
            <div class="sidebar__inner">
                <h4><strong>目录</strong></h4>
                <hr>
                <div>
                    {{ toc|safe }}
                </div>
            </div>
        </div>

    </div>
</div>

<style>
    .sidebar{
        will-change: min-height;
    }

    .sidebar__inner{
        transform: translate(0, 0);
        transform: translate3d(0, 0, 0);
        will-change: position, transform;
    }
</style>

<script>
    function confirm_safe_delete() {
        layer.open({
            title: "确认删除",
            content: "确认删除这篇文章吗？",
            // 点击确定按钮后调用的回调函数
            yes: function(index, layero) {
                  {#location.href='{% url "blog:article-delete" article.id %}'#}
                    $('form#safe_delete button').click();
                    layer.close(index);
            },
        })
    }
</script>
{% endblock content %}